<template>
  <div class="systemConfig">
    <el-form
      ref="baseFormRef"
      :model="baseForm"
      :rules="rules"
      label-width="140px"
    >
      <el-row class="mt-20">
        <el-col :span="18">
          <el-form-item label="登录方式">
            <el-select v-model="baseForm.singleLogin" placeholder="请选择">
              <el-option label="单一登录" :value="1" />
              <el-option label="同时登录" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="超时登出">
            <el-input-number
              v-model="baseForm.tokenTimeout"
              :min="1"
              :precision="0"
              :step="1"
              controls-position="right"
            />分钟
          </el-form-item>
          <el-form-item label="默认密码" prop="defaultPassword">
            <el-input
              v-model="baseForm.defaultPassword"
              show-password
              style="width: 190px"
            />
          </el-form-item>
          <el-form-item label="密码错误次数">
            <el-input-number
              v-model="baseForm.passwordErrorsNumber"
              :min="0"
              :precision="0"
              :step="1"
              controls-position="right"
            />次
            <div class="tip">
              输入密码错误将用户锁定，设置3以下值表示不启动该功能
            </div>
            <el-radio-group v-model="baseForm.lockType">
              <el-radio :label="1">账号锁定</el-radio>
              <el-radio :label="2">延时登录</el-radio>
            </el-radio-group>
            <div v-if="baseForm.lockType === 2">
              <span class="lockTime">延迟时间</span>
              <el-input-number
                v-model="baseForm.lockTime"
                :min="1"
                :precision="0"
                :step="1"
                controls-position="right"
              />分钟
            </div>
          </el-form-item>
          <el-form-item label="登录验证码">
            <el-switch
              v-model="baseForm.enableVerificationCode"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item
            label="验证码位数"
            v-if="baseForm.enableVerificationCode"
          >
            <el-input-number
              v-model="baseForm.verificationCodeNumber"
              :min="3"
              :max="6"
              :precision="0"
              :step="1"
              controls-position="right"
            />位
          </el-form-item>
          <el-form-item label="登录提示语">
            <el-switch
              v-model="baseForm.lastLoginTimeSwitch"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item v-if="baseForm.lastLoginTimeSwitch">
            <el-card
              class="box-card"
              shadow="never"
              style="width: 300px"
              :body-style="{ padding: '0px 20px' }"
            >
              <div slot="header">
                <span>上次登录信息提示</span>
                <i
                  style="float: right; padding: 11px 0"
                  class="el-icon-close"
                />
              </div>
              <div class="item">
                <p>时间：2018-10-17 12:40</p>
                <p>地点：上海市</p>
                <p>IP：255.255.0.0</p>
              </div>
            </el-card>
          </el-form-item>
          <el-form-item label="白名单验证">
            <el-switch
              v-model="baseForm.whitelistSwitch"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item label="白名单设置" v-if="baseForm.whitelistSwitch">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 10 }"
              v-model="baseForm.whiteListIp"
              placeholder="允许访问IP"
            />
            <div class="tip">
              多个IP设置，用英文符号隔开，如192.168.0.1,192.168.0.2
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              class="saveBtn"
              :loading="btnLoading"
              @click="submitForm('SafeConfig')"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { updateSystemConfig } from "@/api/system/sysConfig";
export default {
  name: "SysConfigSecuritySetting",
  props: {
    dataForm: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      const passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}/;
      if (value === "") {
        callback(new Error("默认密码不能为空"));
      } else if (!passwordreg.test(value)) {
        callback(
          new Error("默认密码必须由数字、字母、特殊字符组合,请输入6-16位")
        );
      } else {
        callback();
      }
    };
    return {
      btnLoading: false,
      baseForm: {
        singleLogin: "1",
        tokenTimeout: "1",
        defaultPassword: "",
        passwordErrorsNumber: 0,
        lockType: 1,
        lockTime: 10,
        enableVerificationCode: 0,
        verificationCodeNumber: 4,
        lastLoginTimeSwitch: 1,
        whitelistSwitch: 1,
        whiteListIp: "",
      },

      rules: {
        defaultPassword: [
          {
            required: true,
            validator: validatePass,
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    dataForm() {
      this.baseForm = this.dataForm ? this.dataForm : this.baseForm;
    },
  },
  computed: {
    SafeConfig() {
      return {
        category: "SafeConfig",
        list: [
          {
            name: "登录方式",
            key: "singleLogin",
            value: this.baseForm.singleLogin,
          },
          {
            name: "超出登录",
            key: "tokenTimeout",
            value: this.baseForm.tokenTimeout,
          },
          {
            name: "默认密码",
            key: "defaultPassword",
            value: this.baseForm.defaultPassword,
          },
          {
            name: "密码错误次数",
            key: "passwordErrorsNumber",
            value: this.baseForm.passwordErrorsNumber,
          },
          {
            name: "账号锁定1/延时锁定2",
            key: "lockType",
            value: this.baseForm.lockType,
          },
          {
            name: "延时登录时间",
            key: "lockTime",
            value: this.baseForm.lockTime,
          },
          {
            name: "登录验证码",
            key: "enableVerificationCode",
            value: this.baseForm.enableVerificationCode,
          },
          {
            name: "验证码位数",
            key: "verificationCodeNumber",
            value: this.baseForm.verificationCodeNumber,
          },
          {
            name: "登录提示语",
            key: "lastLoginTimeSwitch",
            value: this.baseForm.lastLoginTimeSwitch,
          },
          {
            name: "白名单验证",
            key: "whitelistSwitch",
            value: this.baseForm.whitelistSwitch,
          },
          {
            name: "白名单设置",
            key: "whiteListIp",
            value: this.baseForm.whiteListIp,
          },
        ],
      };
    },
  },
  methods: {
    /**保存 */
    submitForm(category) {
      this.btnLoading = true;
      console.log("category", category);
      // 安全设置
      if (category == "SafeConfig") {
        updateSystemConfig(this.SafeConfig)
          .then((res) => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1500,
              onClose: () => {
                this.btnLoading = false;
                this.$emit("refreshInit");
              },
            });
          })
          .catch(() => {
            this.btnLoading = false;
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.systemConfig {
  padding: 0;

  .saveBtn {
    width: 100px;
  }

  .tip {
    font-size: 14px;
    color: #a5a5a5;
  }

  .lockTime {
    line-height: 32px;
    padding-right: 12px;
    color: #606266;
    font-size: 14px;
  }
}
</style>
